<template>
  <div class="statistics-wrapper">
    <div class="statistics-header-wrapper">
      <div class="statistics-header-course-selector-wrapper">
        <span class="statistics-header-course-selector-span">选择课程 : </span>
        <el-select class="statistics-header-course-selector"
                   v-model="selectedCourseId"
                   @change="onCourseChange"
                   placeholder="请选择您想要进行统计的课程">
          <el-option
                  v-for="item in courses"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
      </div>
      <el-button class="statistics-header-draw-button"
                 icon="el-icon-s-data"
                 :disabled="buttonDisabled"
                 @click="drawLine"
                 type="primary">进行统计</el-button>
    </div>
    <div class="statistics-sc-wrapper">
      <div class="statistics-students-wrapper"
           v-loading="studentLoading">
        <div class="statistics-students"
             id="student"></div>
      </div>
      <div class="statistics-course-wrapper"
           v-loading="courseLoading">
        <div class="statistics-course"
             id="course"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AttdStatistics",
    data() {
      return {
        teacherIdByUser: null,
        selectedCourseId: null,
        selectedCourseName: '',
        title: '',
        studentSource: [],
        courseData: [],
        courses: [],
        buttonDisabled: true,
        studentLoading: false,
        courseLoading: false
      }
    },
    mounted() {
      this.getCoursesByTeacher()
    },
    methods: {
      onCourseChange() {
        this.buttonDisabled = false
      },
      //  画学生考勤统计柱状图
      drawStudentLine() {
        let myChart = this.$echarts.init(document.getElementById('student'));
        myChart.setOption({
          legend: {},
          tooltip: {},
          dataset: {
            dimensions: ['studentName', 'studentAttd', 'studentLate', 'studentLeave'],
            // dimensions: ['student', '2015', '2016', '2017'],
            source: this.studentSource
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#333',
              //  让x轴文字方向为竖向
              interval: 0,
              formatter: function(value) {
                return value.split('').join('\n')
              }
            }
          },
          yAxis: {
          },
          series: [
            {
              type: 'bar',
              name: '出勤',
              itemStyle: {
                normal: {
                  color: '#67C23A'
                }
              },
              barWidth: 10
            },
            {
              type: 'bar',
              name: '旷课',
              itemStyle: {
                normal: {
                  color: '#F56C6C'
                }
              },
              barWidth: 10
            },
            {
              type: 'bar',
              name: '请假',
              itemStyle: {
                normal: {
                  color: '#E6A23C'
                }
              },
              barWidth: 10
            }
          ]
        })
      },
      //  画课程考勤统计饼状图
      drawCourseLine() {
        let myChart = this.$echarts.init(document.getElementById('course'));
        myChart.setOption({
          title: {
            text: this.selectedCourseName,
            subtext: '考勤总数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: this.courseData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      //  点击按钮后开始画图
      drawLine() {
        this.getStudentStatistics()
        this.getCourseStatistics()
      },
      //  获取学生考勤统计结果
      getStudentStatistics() {
        this.studentLoading = true
        this.getRequest('/attdmanagement/statistics/student/?teacherId=' + this.teacherIdByUser
            + '&courseId=' + this.selectedCourseId).then(resp => {
              if (resp) {
                this.studentSource = resp
                this.studentLoading = false
                this.drawStudentLine()
              }
        })
      },
      //  获取课程考勤统计结果
      getCourseStatistics() {
        this.getRequest('/attdmanagement/statistics/course/?teacherId=' + this.teacherIdByUser
            + '&courseId=' + this.selectedCourseId).then(resp => {
          this.courseLoading = true
          if (resp) {
            this.courseData = [
              {value: resp.courseAttd, name: '出勤总数', itemStyle:{color: '#67C23A'}},
              {value: resp.courseLate, name: '旷课总数', itemStyle:{color: '#F56C6C'}},
              {value: resp.courseLeave, name: '请假总数', itemStyle:{color: '#E6A23C'}}
            ]
            for(let i = 0; i < this.courses.length; i++) {
              if (this.courses[i].id === this.selectedCourseId) {
                this.selectedCourseName = this.courses[i].name
              }
            }
            this.courseLoading = false
            this.drawCourseLine()
          }
        })
      },
      //  获取当前操作系统的老师的id
      initTeacherIdByUser() {
        let user = JSON.parse(window.sessionStorage.getItem('user'))
        this.teacherIdByUser = user.teacherId
      },
      getCoursesByTeacher() {
        this.initTeacherIdByUser()
        this.getRequest('/attdmanagement/statistics/course/' + this.teacherIdByUser).then(resp => {
          if (resp) {
            this.courses = resp
          }
        })
      }
    }
  }
</script>

<style lang="less">

  .statistics-wrapper {
    width: 90%;
    margin-top: 40px;
    margin-left: 40px;

    .statistics-header-wrapper {
      box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
      border-radius: 4px;
      padding: 20px 30px;
      display: flex;
      justify-content: space-between;

      .statistics-header-course-selector-wrapper {

        .statistics-header-course-selector-span {
          font-size: 18px;
        }

        .statistics-header-course-selector {
          width: 220px;
        }
      }

      .statistics-header-draw-button {

      }
    }

    .statistics-sc-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;

      .statistics-students-wrapper {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
        border-radius: 4px;

        margin-right: 20px;
        padding: 20px 0;
        width: 530px;

        .statistics-students {
          width: 100%;
          height: 400px;
        }
      }

      .statistics-course-wrapper {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
        border-radius: 4px;
        padding: 20px 20px;
        width: 430px;

        .statistics-course {
          width: 100%;
          height: 400px;
        }
      }
    }
  }

</style>